<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <title th:text="${record.childrenName} + ' - ' + ${record.birthday} + ' - 能力发展评测报告 - 麦忒教育'">黄梓萱 - 20180926 -
        能力发展评测报告 </title>
    <link rel="stylesheet" th:href="@{/assets/css/jquery.fullpage.min.css}" type="text/css"
          href="../static/assets/css/jquery.fullpage.min.css"/>
    <link rel="stylesheet" th:href="@{/assets/css/report.css}" type="text/css" href="../static/assets/css/report.css"/>
</head>
<body>
<div class="phone-frame">
    <div id="fullpage">
        <div class="section">
            <div class="slide home normal-scroll">
                <div class="wrapper">
                    <div id="scene">
                        <div data-depth="0.15" class="top-plant">
                            <img th:src="@{/assets/images/report/pic_plant_below@2x.png}"
                                 src="../static/assets/images/report/pic_plant_below@2x.png" alt=""/>
                        </div>
                        <div data-depth="0.0" class="title">
                            <img th:src="@{/assets/images/report/pic_tittle@2x.png}"
                                 src="../static/assets/images/report/pic_tittle@2x.png" alt=""/>
                        </div>
                        <div data-depth="0.0" class="time">
                            <span th:text="${record.createTime}">2017.12.09</span>
                        </div>
                        <div data-depth="0.0" class="book">
                            <img th:src="@{/assets/images/report/pic_book@2x.png}"
                                 src="../static/assets/images/report/pic_book@2x.png" alt=""/>
                        </div>
                        <div data-depth="0.4" class="bottom-plant">
                            <img th:src="@{/assets/images/report/pic_plant_top@2x.png}"
                                 src="../static/assets/images/report/pic_plant_top@2x.png" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide basic normal-scroll">
                <div class="wrapper">
                    <div id="scene2">
                        <div data-depth="0.15" class="top-left-plant">
                            <img th:src="@{/assets/images/report/pic_topleft@2x.png}"
                                 src="../static/assets/images/report/pic_topleft@2x.png" alt=""/>
                        </div>
                        <div data-depth="0.15" class="top-right-plant">
                            <img th:src="@{/assets/images/report/pic_topright@2x.png}"
                                 src="../static/assets/images/report/pic_topright@2x.png" alt=""/>
                        </div>
                        <div data-depth="0.2" class="bottom-plant">
                            <img th:src="@{/assets/images/report/pic_below@2x.png}"
                                 src="../static/assets/images/report/pic_below@2x.png" alt=""/>
                        </div>
                        <div data-depth="0.0" class="table">
                            <div class="avatar">
                                <img th:if="${record.gender eq '男'}"
                                     th:src="@{/assets/images/report/profile photo_male@2x.png}"
                                     src="../static/assets/images/report/profile photo_female@2x.png" alt=""/>
                                <img th:if="${record.gender eq '女'}"
                                     th:src="@{/assets/images/report/profile photo_female@2x.png}"
                                     src="../static/assets/images/report/profile photo_female@2x.png" alt=""/>
                            </div>
                            <div class="name" th:text="${record.childrenName}">小丸子</div>
                            <div class="content">
                                <ul>
                                    <li>
                                        <div class="attribute">性别</div>
                                        <div th:text="${record.gender}" class="value">女</div>
                                    </li>
                                    <li>
                                        <div class="attribute">出生年月</div>
                                        <div th:text="${record.birthday}" class="value">2015.04.07</div>
                                    </li>
                                    <li th:if="${!#strings.isEmpty(record.height)}">
                                        <div class="attribute">身高</div>
                                        <div class="value"><span th:text="${record.height}">90</span>cm</div>
                                    </li>
                                    <li th:if="${!#strings.isEmpty(record.weight)}">
                                        <div class="attribute">体重</div>
                                        <div class="value"><span th:text="${record.weight}">12</span>kg</div>
                                    </li>
                                    <li th:if="${!#strings.isEmpty(record.header)}">
                                        <div class="attribute">头围</div>
                                        <div class="value"><span th:text="${record.header}">44</span>cm</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div data-depth="0.4" class="animal">
                            <img th:src="@{/assets/images/report/pic_top@2x.png}"
                                 src="../static/assets/images/report/pic_top@2x.png" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide normal-scroll block" th:if="${!#strings.isEmpty(record.height)}">
                <div class="container">
                    <div class="wrapper">
                        <div class="content">
                            <h1>身体发育
                                <small th:text="'（'+${record.month}+'月）'"></small>
                            </h1>
                            <h2>1、宝宝按年龄测身长百分位数</h2>
                            <div class="evaluate-chart">
                                <div th:if="${record.month le 12}"
                                     th:class="'chart height range_1_12 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.height}"
                                         th:style="'top:calc(420px - 60px - 360px*('+${record.height gt 85 ? 86 : (record.height lt 50 ? 49 : record.height)}+' - 50) /(85 - 50));left: calc(20px - 6px + 290px*('+${record.month}+' - 1)/11);'"
                                         style="top: calc(420px - 58px - (360px*(70 - 50)) /(85 - 50)); left: calc(20px - 4px + 290px*(10 - 1) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 12 and record.month le 24}"
                                     th:class="'chart height range_13_24 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.height}"
                                         th:style="'top:calc(420px - 60px - 360px*('+${record.height gt 100 ? 101 : (record.height lt 70 ? 69 : record.height)}+' - 70) /(100 - 70));left: calc(20px - 6px + 290px*('+${record.month}+' - 13)/11);'"
                                         style="top: calc(420px - 58px - (360px*(80 - 70)) /(100 - 70)); left: calc(20px - 4px + 290px*(16 - 13) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 24 and record.month le 36}"
                                     th:class="'chart height range_25_36 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.height}"
                                         th:style="'top:calc(420px - 60px - 360px*('+${record.height gt 110 ? 111 : (record.height lt 80 ? 79 : record.height)}+' - 80) /(110 - 80));left: calc(20px - 6px + 290px*('+${record.month}+' - 25)/11);'"
                                         style="top: calc(420px - 58px - (360px*(90 - 80)) /(110 - 80)); left: calc(20px - 4px + 290px*(25 - 25) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 36 and record.month le 48}"
                                     th:class="'chart height range_37_48 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.height}"
                                         th:style="'top:calc(420px - 60px - 360px*('+${record.height gt 120 ? 121 : (record.height lt 90 ? 89 : record.height)}+' - 90) /(120 - 90));left: calc(20px - 6px + 290px*('+${record.month}+' - 37)/11);'"
                                         style="top: calc(420px - 58px - (360px*(105.3 - 90)) /(120 - 90)); left: calc(20px - 4px + 290px*(37 - 37) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 48 and record.month le 60}"
                                     th:class="'chart boy height range_49_60 ' + ${record.gender eq '女'?'girl':'boy'} +'">
                                    <div class="dot" th:text="${record.height}"
                                         th:style="'top: calc(420px - 58px - (360px*('+${record.height gt 130 ? 131 : (record.height lt 90 ? 89 : record.height)}+' - 90) /(130 - 90)); left: calc(20px - 6px + 290px*('+${record.month}+' - 49) /11);'"
                                         style="top: calc(420px - 58px - (360px*(110 - 90)) /(130 - 90)); left: calc(20px - 4px + 290px*(52 - 49) /11);">
                                        110
                                    </div>
                                </div>
                                <div th:if="${record.month gt 60 and record.month le 72}"
                                     th:class="'chart girl height range_61_72' + ${record.gender eq '女'?'girl':'boy'} +'">
                                    <div class="dot" th:text="${record.height}"
                                         th:style="'top: calc(420px - 58px - (360px*('+${record.height gt 140 ? 141 : (record.height lt 100 ? 99 : record.height)}+') /(140 - 100); left: calc(20px - 6px + 290px*('+${record.month}+' - 61) /11);'"
                                         style="top: calc(420px - 58px - (360px*(120.3 - 100)) /(140 - 100)); left: calc(20px - 4px + 290px*(66 - 61) /11);">
                                        120.3
                                    </div>
                                </div>
                            </div>
                            <!--<div class="panel p-value"-->
                            <!--th:attr="data-value=${record.height},data-gender=${record.gender ==0?'girl':'boy'},data-type='height',data-month=${record.month}"-->
                            <!--data-gender="boy" data-type="height" data-month="6" data-value="66.2">-->
                            <!--<div class="stage0 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P3。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage1 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P25。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage2 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P75。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage3 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P97。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage4 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于P97-。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--</div>-->
                            <!--<div class="panel">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于P25-P75。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide normal-scroll block" th:if="${!#strings.isEmpty(record.weight)}">
                <div class="container">
                    <div class="wrapper">
                        <div class="content">
                            <h1>身体发育
                                <small th:text="'（'+${record.month}+'月）'"></small>
                            </h1>
                            <h2>2、宝宝按年龄测体重百分位数</h2>
                            <div class="evaluate-chart">
                                <!--<div class="title">宝宝按年龄测体重百分位数</div>-->
                                <!--<div class="target">-->
                                <!--<ul>-->
                                <!--<li>P3 <span class="bar red"></span></li>-->
                                <!--<li>P25 <span class="bar orange"></span></li>-->
                                <!--<li>P75 <span class="bar yellow"></span></li>-->
                                <!--<li>P97 <span class="bar blue"></span></li>-->
                                <!--<li>宝宝 <span class="bar green"></span></li>-->
                                <!--</ul>-->
                                <!--</div>-->
                                <div th:if="${record.month le 12}"
                                     th:class="'chart weight range_1_12 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.weight}"
                                         th:style="'top:calc(420px - 58px - 360px*('+${record.weight gt 14 ? 14.5 : (record.weight lt 3 ? 2.5 : record.weight)}+' - 3) / (14 - 3));left: calc(20px - 6px + 290px*('+${record.month}+' - 1) /11);'"
                                         style="top: calc(420px - 58px - (360px*(10.1 - 3)) /(14 - 3)); left: calc(20px - 4px + 290px*(10 - 1) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 12 and record.month le 24}"
                                     th:class="'chart weight range_13_24 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.weight}"
                                         th:style="'top:calc(420px - 58px - 360px*('+${record.weight gt 17 ? 17.5 : (record.weight lt 7 ? 6.5 : record.weight)}+' - 7) / (17 - 7));left: calc(20px - 6px + 290px*('+${record.month}+' - 13) /11);'"
                                         style="top: calc(420px - 58px - (360px*(12 - 7)) /(17 - 7)); left: calc(20px - 4px + 290px*(16 - 13) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 24 and record.month le 36}"
                                     th:class="'chart weight range_25_36 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.weight}"
                                         th:style="'top:calc(420px - 58px - 360px*('+${record.weight gt 21 ? 21.5 : (record.weight lt 10 ? 9.5 : record.weight)}+' - 10) / (21 - 10));left: calc(20px - 6px + 290px*('+${record.month}+' - 25) /11);'"
                                         style="top: calc(420px - 58px - (360px*(16 - 10)) /(21 - 10)); left: calc(20px - 4px + 290px*(25 - 25) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 36 and record.month le 48}"
                                     th:class="'chart weight range_37_48 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div class="dot" th:text="${record.weight}"
                                         th:style="'top:calc(420px - 58px - 360px*('+${record.weight gt 25 ? 25.5 : (record.weight lt 11 ? 10.5 : record.weight)}+' - 11) / (25 - 11));left: calc(20px - 6px + 290px*('+${record.month}+' - 37) /11);'"
                                         style="top: calc(420px - 58px - (360px*(18.1 - 11)) /(25 - 11)); left: calc(20px - 4px + 290px*(39 - 37) /11);">
                                    </div>
                                </div>
                                <div th:if="${record.month gt 48 and record.month le 60}"
                                     th:class="'chart weight range_49_60' + ${record.gender eq '女'?'girl':'boy'}">
                                    <div class="dot" th:text="${record.weight}"
                                         th:style="'top: calc(420px - 58px - (360px*('+${record.weight gt 30 ? 30.5 : (record.weight lt 10 ? 9.5 : record.weight)}+' - 10) / (30 - 10); left: calc(20px - 6px + 290px*('+${record.month}+' - 49) /11);'"
                                         style="top: calc(420px - 58px - (360px*(20 - 10)) /(30 - 10)); left: calc(20px - 4px + 290px*(54 - 49) /11);">
                                        20
                                    </div>
                                </div>
                                <div th:if="${record.month gt 60 and record.month le 72}"
                                     th:class="'chart weight range_61_72' + ${record.gender eq '女'?'girl':'boy'}">
                                    <div class="dot" th:text="${record.weight}"
                                         th:style="'top: calc(420px - 58px - (360px*('+${record.weight gt 35 ? 35.5 : (record.weight lt 15 ? 14.5 : record.weight)}+' - 15) / (35 - 15)); left: calc(20px - 6px + 290px*('+${record.month}+' - 61) /11);'"
                                         style="top: calc(420px - 58px - (360px*(25 - 15)) /(35 - 15)); left: calc(20px - 4px + 290px*(66 - 61) /11);">
                                        25
                                    </div>
                                </div>
                                <!--<div class="notice">-->
                                <!--小于P3较弱；P3-P25中等偏下；P25-P75中等-->
                                <!--P75-P97中等偏上；大于P97超常-->
                                <!--</div>-->
                            </div>
                            <!--<div class="panel p-value"-->
                            <!--th:attr="data-value=${record.weight},data-gender=${record.gender ==0?'girl':'boy'},data-type='weight',data-month=${record.month}"-->
                            <!--data-gender="boy" data-type="height" data-month="6" data-value="66.2">-->
                            <!--<div class="stage0 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P3。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage1 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P25。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage2 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P75。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage3 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于-P97。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--<div class="stage4 hidden">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于P97-。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                            <!--</div>-->
                            <!--<div class="panel">-->
                            <!--<span class="title">总体评估：</span>小丸子宝宝本次身长测评百分位处于P25-P75。在同龄宝宝中，宝宝的身长处于中等水平，发育正常！-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide normal-scroll block"
                 th:if="${(!#strings.isEmpty(record.weight)) and (!#strings.isEmpty(record.height))}">
                <div class="container">
                    <div class="wrapper">
                        <div class="content">
                            <h1>身体发育
                                <small th:text="'（'+${record.month}+'月）'"></small>
                            </h1>
                            <h2>3、按身高测体重</h2>
                            <div class="evaluate-chart">
                                <div th:if="${record.height le 70}"
                                     th:class="'chart bmi '+ ${record.gender eq '女'?'girl range_51_70':'boy range_52_70'} +''">
                                    <div th:if="${record.gender eq '男'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 11 ? 11.5 : (record.weight lt 3 ? 2.5 : record.weight)}+' - 3) / (11 - 3));left: calc(20px - 4px + 290px*('+${record.height}+' - 51) /(70 - 52));'"
                                         style="top: calc(360px - 58px - (300px*(8.0 - 3)) /(11 - 3)); left: calc(20px - 4px + 290px*(60 - 52) /(70 - 52));">
                                        8.0
                                    </div>
                                    <div th:if="${record.gender eq '女'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 11 ? 11.5 : (record.weight lt 3 ? 2.5 : record.weight)}+' - 3) / (11 - 3));left: calc(20px - 4px + 290px*('+${record.height}+' - 51) /(70 - 51));'"
                                         style="top: calc(360px - 58px - (300px*(8.0 - 3)) /(11 - 3)); left: calc(20px - 4px + 290px*(60 - 52) /(70 - 52));">
                                        8.0
                                    </div>
                                </div>
                                <div th:if="${record.height gt 70 and record.height le 90}"
                                     th:class="'chart bmi range_71_90 '+ ${record.gender ==0?'girl':'boy'} +''">
                                    <div th:if="${record.gender eq '男'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 16 ? 16.5 : (record.weight lt 6 ? 5.5 : record.weight)}+' - 6) / (16 - 6));left: calc(20px - 4px + 290px*('+${record.height}+' - 71) /(90 - 71));'"
                                         style="top: calc(360px - 58px - (300px*(12.0 - 6)) /(16 - 6)); left: calc(20px - 4px + 290px*(84 - 71) /(90 - 71));">
                                        12.0
                                    </div>
                                    <div th:if="${record.gender eq '女'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 16 ? 16.5 : (record.weight lt 6 ? 5.5 : record.weight)}+' - 6) / (16 - 6));left: calc(20px - 4px + 290px*('+${record.height}+' - 71) /(90 - 71));'"
                                         style="top: calc(360px - 58px - (300px*(12.0 - 6)) /(16 - 6)); left: calc(20px - 4px + 290px*(84 - 71) /(90 - 71));">
                                        12.0
                                    </div>
                                </div>
                                <div th:if="${record.height gt 90 and record.height le 110}"
                                     th:class="'chart bmi range_91_110 '+ ${record.gender eq '女'?'girl':'boy'} +''">
                                    <div th:if="${record.gender eq '男'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 25 ? 25.5 : (record.weight lt 10 ? 9.5 : record.weight)}+' - 10) / (25 - 10));left: calc(20px - 4px + 290px*('+${record.height}+' - 91) /(110 - 91));'"
                                         style="top: calc(360px - 58px - (300px*(14 - 10)) /(25 - 10)); left: calc(20px - 4px + 290px*(100 - 91) /(110 - 91));">
                                        14
                                    </div>
                                    <div th:if="${record.gender eq '女'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 25 ? 25.5 : (record.weight lt 10 ? 9.5 : record.weight)}+' - 10) / (25 - 10));left: calc(20px - 4px + 290px*('+${record.height}+' - 91) /(110 - 91));'"
                                         style="top: calc(360px - 58px - (300px*(14 - 10)) /(25 - 10)); left: calc(20px - 4px + 290px*(100 - 91) /(110 - 91));">
                                        14
                                    </div>
                                </div>
                                <div th:if="${(record.height gt 110)}"
                                     th:class="'chart bmi  '+ ${record.gender ==0?'girl range_111_124':'boy range_111_126'} +''">
                                    <div th:if="${record.gender eq '男'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 35 ? 35.5 : (record.weight lt 15 ? 14.5 : record.weight)}+' - 15) / (35 - 15));left: calc(20px - 4px + 290px*('+${record.height}+' - 111) /(126 - 111));'"
                                         style="top: calc(360px - 58px - (300px*(25 - 15)) /(35 - 15)); left: calc(20px - 4px + 290px*(120 - 111) /(126 - 111));">
                                        25
                                    </div>
                                    <div th:if="${record.gender eq '女'}" class="dot"
                                         th:text="${record.weight}"
                                         th:style="'top:calc(360px - 58px - 300px*('+${record.weight gt 35 ? 35.5 : (record.weight lt 15 ? 14.5 : record.weight)}+' - 15) / (30 - 15));left: calc(20px - 4px + 290px*('+${record.height}+' - 111) /(124 - 111));'"
                                         style="top: calc(360px - 58px - (300px*(25 - 15)) /(35 - 15)); left: calc(20px - 4px + 290px*(120 - 111) /(126 - 111));">
                                        25
                                    </div>
                                </div>


                            </div>
                            <div class="panel p-value"
                                 th:attr="data-name=${record.childrenName},data-gender=${record.gender ==0?'girl':'boy'},data-month=${record.month},data-height=${record.height},data-weight=${record.weight}"
                                 data-name="小丸子" data-gender="girl" data-month="4" data-height="60.6" data-weight="5.1">
                                <div>
                                    <span class="title">总体评估：</span><span id="conclusion"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide normal-scroll block">
                <div class="container">
                    <div class="wrapper">
                        <div class="content">
                            <h1>能力发展</h1>
                            <h2 th:text="'宝宝能力发展涉及七个维度，分别是大肢体动作、精细动作、注意力、认知发展、语言发展、情感与社会性发展、自理能力。通过对'+${record.childrenName}+'宝宝的观察与互动，具体如下：'"></h2>
                            <div class="ability-chart">
                                <div class="chart">
                                    <div th:each="category, categoryStat :${record.recordCategoryList}"
                                         th:class="'btn btn'+${categoryStat.index+1}+' scale1'" class="btn btn1 scale1"
                                         th:attr="data-modal=${category.questionRecords}"
                                         data-modal='[{"content": "1、宝宝能否垒高8-9块积木并保证不倒？","type": "danger","label":"需努力"},{"content": "还差很多？","type": "warning","label":"中等偏上"}]'>
                                        <div th:text="${category.score}" class="score">96</div>
                                        <div th:text="${category.typeName}" class="label">精细动作</div>
                                    </div>
                                </div>
                                <div class="notice">
                                    低于 85 分弱势；85-115 分正常；115-130 分中等偏上；大于 130 分优势
                                </div>
                            </div>
                            <div class="panel">
                                <span class="title">总体评估：</span><span
                                    th:text="'从图中数据来看，'+${record.childrenName}+'宝宝'"></span>
                                <span th:text="${record.content}"></span>
                                <!--<span class="content" th:each="category, categoryStat :${record.recordCategoryList}">-->

                                <!--<span th:if="${category.score&lt;85}"><span th:text="${#strings.replace(category.typeName,'发展','')}"></span>相对较弱</span>-->
                                <!--<span th:if="${category.score ge 85 and category.score&lt;115}"><span th:text="${#strings.replace(category.typeName,'发展','')}"></span>处于中等水平</span>-->
                                <!--<span th:if="${category.score ge 115 and category.score&lt;130}"><span th:text="${#strings.replace(category.typeName,'发展','')}"></span>处于中等偏上</span>-->
                                <!--<span th:if="${category.score ge 130 }"><span th:text="${#strings.replace(category.typeName,'发展','')}"></span>非常好</span>-->
                                <!--<span th:text="${categoryStat.index == categoryStat.size -1}?'。':';'"></span>-->
                                <!--</span>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${recommendPlanTag and record.recommendCourseTimes!=null and (record.recommendCourseTimes.nurseryTimes>0 or record.recommendCourseTimes.earlyTimes>0)}"
                 class="slide normal-scroll block">
                <div class="container">
                    <div class="wrapper">
                        <div class="content">
                            <h1>推荐课程方案</h1>
                            <div th:if="${record.recommendCourseTimes.nurseryTimes>0 }">
                                <h2>托班课程
                                    <div class="right"><span class="times"
                                                             th:text="${record.recommendCourseTimes.nurseryTimes}"></span>个月
                                    </div>
                                </h2>
                                <article
                                        th:text="'根据宝宝各项能力的发展评估，我们为您推荐'+${record.recommendCourseTimes.nurseryTimes}+'个月全日托课程，在宝宝每一天的学习、运动、生活、游戏中重点发展孩子的'+${record.recordCategoryList.get(0).typeName}+'、'+${record.recordCategoryList.get(1).typeName}+'、'+${record.recordCategoryList.get(2).typeName}+'，同时关注孩子'+${record.recordCategoryList.get(3).typeName}+'、'+${record.recordCategoryList.get(4).typeName}+'、'+${record.recordCategoryList.get(5).typeName}+'、'+${record.recordCategoryList.get(6).typeName}+'等各方面能力的综合发展。'">

                                </article>
                            </div>
                            <div th:if="${record.recommendCourseTimes.earlyTimes>0 and record.recommendCourseList.size()>0}">
                                <h2>SAT 早教课程
                                    <div class="right"><span class="times"
                                                             th:text="${record.recommendCourseTimes.earlyTimes}"></span>节
                                    </div>
                                </h2>
                                <article
                                        th:text="'根据宝宝的'+${record.recommendCause}+'的发展评估结果，为更进一步提升宝宝各项能力的发展，我们为宝宝安排了适合其发展水平的早教课程，共计'+${record.recommendCourseTimes.earlyTimes }+'节,其中部分课程如下:'">
                                </article>
                                <div class="desc" th:each="course, courseStat:${record.recommendCourseList}">
                                    <div class="d-title" th:text="${course.cause}">推荐原因</div>
                                    <div class="d-info" th:text="${course.courseName}">推荐课程</div>
                                </div>
                            </div>
                            <div th:if="${record.recommendCourseTimes.earlyTimes>0 and !(record.recommendCourseList.size()>0)}">
                                <h2>SAT 早教课程
                                    <div class="right"><span class="times"
                                                             th:text="${record.recommendCourseTimes.earlyTimes}"></span>节
                                    </div>
                                </h2>
                                <article
                                        th:text="'根据宝宝的'+${record.recordCategoryList.get(0).typeName}+'、'+${record.recordCategoryList.get(1).typeName}+'、'+${record.recordCategoryList.get(2).typeName}+'的发展评估结果，为更进一步提升宝宝各项能力的发展，我们为宝宝安排了适合其发展水平的早教课程，共计'+${record.recommendCourseTimes.earlyTimes }+'节。'">
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${adviseTag}" class="slide block">
                <div class="container">
                    <div class="wrapper">
                        <div class="content">
                            <div class="total-evaluate">
                                <h1>总体评估及建议</h1>
                                <article th:text="${record.advise}">
                                    <!--根据宝宝各项能力的发展评估，我们为您推荐6个月全日托课程，在宝宝每一天的学习、运动、生活、游戏中重点发展孩子的大肢体运动能力、认知能力、生活自理能力，同时关注孩子精细动作、语言、情感与社会性等各方面能力的综合发展。-->
                                </article>
                            </div>
<!--                            <div class="footer-logo">-->
<!--                                <img width="80" th:src="@{/assets/images/report/icon_logo@2x.png}"-->
<!--                                     src="../static/assets/images/report/icon_logo@2x.png" alt=""/>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="control-arrow">
        <a class="left hidden" href="javascript:$.fn.fullpage.moveSlideLeft();"></a>
        <a class="right" href="javascript:$.fn.fullpage.moveSlideRight();"></a>
    </div>
    <div id="modal" class="">
        <div class="modal-body">
            <div class="title">
                <div class="left"><span id="modalTitle">精细动作</span></div>
                <div class="right">
                    能力商
                    <span id="modalScore"></span>
                </div>
                <div style="clear:both;"></div>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <div class="left">观察指标</div>
                        <div class="right">观察记录</div>
                        <div style="clear:both;"></div>
                    </li>
                    <div id="modalList"></div>
                </ul>
            </div>
        </div>
    </div>
    <div id="orientLayer" class="mod-orient-layer">
        <div class="mod-orient-layer__content">
            <i class="icon mod-orient-layer__icon-orient"></i>
            <div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/assets/js/jquery-1.11.1.min.js}"
        src="../static/assets/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery.fullpage.min.js}"
        src="../static/assets/js/jquery.fullpage.min.js"></script>
<script type="text/javascript" th:src="@{/assets/js/parallax.min.js}"
        src="../static/assets/js/parallax.min.js"></script>
<script type="text/javascript" th:src="@{/assets/js/record.js}" src="../static/assets/js/record.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#fullpage').fullpage({
            css3: true,
            scrollingSpeed: 1000,
            loopHorizontal: false,
            controlArrows: false,
            normalScrollElements: '.normal-scroll',

            onSlideLeave: function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
                if (nextSlideIndex == 0) {
                    $('.control-arrow .left').addClass('hidden');
                } else {
                    $('.control-arrow .left').removeClass('hidden');
                }

                var slides = $(this).closest('.section').find('.slide').length;

                if (nextSlideIndex == (slides - 1)) {
                    $('.control-arrow .right').addClass('hidden');
                } else {
                    $('.control-arrow .right').removeClass('hidden');
                }
            }
        });
        $('.control-arrow a').on('click', function () {
            $(this).addClass('scale2');
            setTimeout(function () {
                $(this).removeClass('scale2');
            }.bind(this), 1000);
        });
        var scene = document.getElementById('scene');
        var parallaxInstance = new Parallax(scene);

        var scene2 = document.getElementById('scene2');
        var parallaxInstance2 = new Parallax(scene2);

//			$.fn.fullpage.moveTo(1, 2);

        $('.ability-chart .btn').on('click', function () {
            var json = $(this).data('modal');
            var score = $(this).find('.score').text();
            var title = $(this).find('.label').text();
            var template = '';
            try {
                $.each(json, function (index, element) {
                    template += '<li><div class="left">' + element.content + '</div>';
                    if (element.result == 1) {
                        template += '<div class="right"><span class="badge danger">需努力</span></div>';
                    } else if (element.result == 2) {
                        template += '<div class="right"><span class="badge primary">一般</span></div>';
                    } else if (element.result == 3) {
                        template += '<div class="right"><span class="badge success">非常好</span></div>';
                    }
                    template += '<div style="clear:both;"></div></li>';
                });
            } catch (err) {
            }

            $('#modalList').html(template);
            $('#modalScore').text(score);
            $('#modalTitle').text(title);
            setTimeout(function () {
                $('#modal').addClass('modal');
            }, 100);

        });
        $('#modal').on('click', function () {
            $('#modal').removeClass('modal');

        });
        $('#modal .modal-body').on('click', function (event) {
            event.stopPropagation();
        });

    });

</script>
</body>
</html>